import { defineStore } from "pinia";
import { store } from "~/store/index";
import { asyncRoutes } from "~/router/index";
import { filterAsyncRoutes } from "~/layout/sidebar/menuUtils";
import router from "~/router/index";
import { isEmpty, isNil } from "lodash-es";
import { mockMenuData } from "~/mock";
interface LayoutState {
	rolesLeftMenu: any;
	rolesMenu: Dict[];
	openKeys: string[];
	collapsed: boolean;
	tagsList: any[];
}

export const useLayoutStore = defineStore({
	id: "landManage-land-layout",
	state: (): LayoutState => ({
		rolesLeftMenu: {},
		rolesMenu: [],
		openKeys: [],
		collapsed: false,
		tagsList: [],
	}),
	persist: {
		enabled: true,
		// 自定义持久化参数
		strategies: [
			{
				// 自定义key
				key: "landManage_layout_store",
				// 自定义存储方式，默认sessionStorage
				// storage: localStorage,
				// 指定要持久化的数据，默认所有 state 都会进行缓存，可以通过 paths 指定要持久化的字段，其他的则不会进行持久化。
				paths: ["rolesLeftMenu", "tagsList", "openKeys", "collapsed"],
			},
		],
	},
	actions: {
		setRolesMenu(menu: Dict[]) {
			this.rolesMenu = menu;
		},
		setRolesLeftMenu(menu: Dict) {
			if (menu) {
				this.rolesLeftMenu = menu;
			}
		},
		setOpenKeys(keys: string[]) {
			this.openKeys = keys;
		},
		setCollapsed(status: boolean) {
			this.collapsed = status;
		},
		setTagItem(tagInfo: Dict) {
			// 页面最多缓存20个标签
			if (this.tagsList.length >= 20) {
				this.tagsList.splice(1, 1);
			}
			if (tagInfo.name !== "home") {
				this.tagsList.push(tagInfo);
			}
			const list = this.tagsList.filter((item) => {
				return item.name === "home";
			});
			if (list.length === 0) {
				this.tagsList.unshift({
					affix: true,
					meta: {
						affix: true,
						title: "首页",
						fullPath: "/home",
					},
					name: "home",
					path: "/home",
					title: "首页",
					visible: false,
					isCache: false,
				});
			}
		},

		// 根据路径删除tag
		delTagItemForPath(path: string) {
			this.tagsList = this.tagsList.filter((item) => {
				return item.path !== path;
			});
		},
		// 删除当前路径标签
		// 若指定了返回页面优先返回此页面
		// 否则返回路由meta指定返回页面
		delTagItem(query?: Dict, opts = { routeName: null }) {
			const routeInfo = router.currentRoute.value;
			this.tagsList = this.tagsList.filter((item) => {
				return item.path !== routeInfo.fullPath;
			});
			// 优先返回指定页面
			if (opts.routeName) {
				router.push({
					name: opts.routeName,
					query: query,
				});
			} else if (routeInfo.meta.backPath) {
				if (isEmpty(query) || isNil(query)) {
					router.push(routeInfo.meta.backPath);
				} else {
					router.push({
						path: routeInfo.meta.backPath,
						query: query,
					});
				}
			} else {
				router.go(-1);
			}
		},
		// 关闭左侧tag
		delLeftTag(index: number) {
			this.tagsList = this.tagsList.filter((item, tagIndex) => {
				return item.affix || index <= tagIndex;
			});
		},
		// 关闭右侧tag
		delRightTag(index: number) {
			this.tagsList = this.tagsList.filter((item, tagIndex) => {
				return item.affix || index >= tagIndex;
			});
		},
		// 关闭其它tag
		delOtherTag(index: number) {
			this.tagsList = this.tagsList.filter((item, tagIndex) => {
				return item.affix || index === tagIndex;
			});
		},
		// 关闭所有tag
		delAllTag() {
			this.tagsList = this.tagsList.filter((item) => {
				return item.affix;
			});
		},
		getRoleMenu() {
			const roleMenu = filterAsyncRoutes(mockMenuData, asyncRoutes);			
			this.rolesMenu = roleMenu;
		},
	},
	getters: {},
});

// 在组件setup函数外使用
export function useLayoutStoreWithOut() {
	return useLayoutStore(store);
}
